<template>
  <div class="max">
    <div class="hang1">
      <div class="hang1-lie1">
        <div class="hang1-lie1-hang1">
          <!-- 上右 -->
          <div style="width: 100%;height:100%;">
            <div id="main1" style="width: 100%;height:100%;"></div>
          </div>
        </div>
        <div class="hang1-lie2-hang2">
          <!-- 中右 -->
          <div style="width: 100%;height:100%;">
            <div id="main3" style="width: 100%;height:100%;"></div>
          </div>
        </div>
      </div>
      <div class="hang1-lie2">
        <div class="hang1-lie2-hang3">
          <!-- 上左 -->
            <div style="width: 100%;height:100%;">
              <div id="main2" style="width: 100%;height:100%;"></div>
            </div>
        </div>
        <div class="hang1-lie1-hang4">
          <!-- 中左 -->
          <div style="width: 100%;height:100%;">
            <div id="main4" style="width: 100%;height:100%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="hang2">
      <div class="hang2-lie1">
        <!-- 下左 -->
        <div class="hang2-lie1-1" ref="myLeftTop">
          <!-- 下左一 -->
          <div style="text-align: center;" >
            <h3 class="myH3">车辆年度毛利率TOP3</h3>
            <el-table :data="cheliang" border size="mini" :height="biaoHeight" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-style="{height:'44px'}" :cell-style="{padding:'0px'}"
              style="width: 100% ; font-size: 17px ;">
              <el-table-column prop="date" width="100%" label="排名" align="center">
              </el-table-column>
              <el-table-column prop="name" label="车型" align="center">
              </el-table-column>
              <el-table-column prop="shouru" label="毛利率" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="hang2-lie1-2">
          <!-- 下左二 -->
          <div style="text-align: center;">
            <h3 class="myH3">衍生年度毛利率TOP3</h3>
            <el-table :data="yansheng" border size="mini" :height="biaoHeight" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-style="{height:'44px'}" :cell-style="{padding:'0px'}"
              style="width: 100%  ;font-size: 17px ;">
              <el-table-column prop="date" width="100%" label="排名" align="center">
              </el-table-column>
              <el-table-column prop="name"  label="项目" align="center">
              </el-table-column>
              <el-table-column prop="shouru" label="毛利率" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="hang2-lie2">
        <!-- 下中 -->
        <div class="hang2-lie2-1">
          <!-- 下中一 -->
          <div style="width: 100%;height:50%;text-align: center;">
            <h3 class="myH3">年度毛利率明细</h3>
            <el-table :data="mingxi" border size="mini" :height="biaoHeightxi" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-style="{height:'30px'}" :cell-style="{padding:'0px'}"
              style="width: 100%  ;font-size: 17px ;">
              <el-table-column prop="name" label="类型" align="center">
              </el-table-column>
              <el-table-column prop="value" label="毛利率" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="hang2-lie2-2">
          <!-- 下中二 -->
            <div style="width: 100%;height:100%;">
              <div id="main" style="width: 100%;height:100%;"></div>
            </div>
        </div>
      </div>
      <div class="hang2-lie3">
        <!-- 下右 -->
        <div style="width: 100%;height:100%;">
          <div id="main5" style="width: 100%;height:100%;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  window.onresize = function(){
       location.reload()
    }
    export default {
      data() {
        return {
          biaoHeight:'',              //表高度
          biaoHeightxi:'',            //表高度

          niandushouru:[51,20,14,45],
          tuyi:[] /* [88, 92, 63, 77, 94, 80, 72, 86, 22, 15, 66, 32] */,
          yanshengy:[]/* [88, 92, 63, 77, 94, 80, 72, 86, 22, 15, 66, 32] */,

          chexingy:[],
          chexingx:[],

          zhanting:[],              //展厅(12月)
          IDCC:[],                  //IDCC(12月)
          erwang:[],                //二网(12月)
          dakehu:[],                //大客户(12月)

          yanshengyuex:[],          //销售部衍生业务本月收入对比 x轴数据
          yanshengyuey:[],          //销售部衍生业务本月收入对比 y轴数据

          cheliang: [{        //车辆年度毛利率TOP3
            date: '',
            name: '',
            shouru: ''
          },{
            date: '',
            name: '',
            shouru: ''
          },{
            date: '',
            name: '',
            shouru: ''
          },] ,
          yansheng: [
            {
              date: '',
              name: '',
              shouru: ''
            },{
              date: '',
              name: '',
              shouru: ''
            },{
              date: '',
              name: '',
              shouru: ''
            }],

            mingxishan:[                      //扇形图
              {
                name: '',
                value: '',
              },{
                name: '',
                value: '',
              },{
                name: '',
                value: '',
              },{
                name: '',
                value: '',
              },
            ],

            mingxi: [{                  //明细表数据
              name: '',
              value:''
            }, {
              name: '',
              value:''
            }, {
              name: '',
              value: '',
              value:''
            }, {
              name: '',
              value:''
            }],

          /* mingxi: [{
            date: '1',
            name: '燃油车',
            shouru: '100'
          }, {
            date: '2',
            name: '新能源车',
            shouru: '50'
          }, {
            date: '3',
            name: '附属衍生',
            shouru: '31'
          }, {
            date: '3',
            name: '推荐衍生',
            shouru: '20'
          }], */
          data8:[]
        }
      },
      methods: {
        myEcharts1() { //销售部车辆业务本年度月毛利率对比
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('main1'));
          var xDataArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] //x轴数据
          var yDataArr = this.tuyi //y轴数据
          // 指定图表的配置项和数据
          var option = {

            title: {
              top:'10',
              text: '销售部车辆业务本年度月毛利率对比',
              left: 'center'
            },
            toolbox: {          //工具栏
              show: true,
              feature: {
                dataView: {
                  readOnly: true
                }, //readOnly只读模式
                saveAsImage: {}
              }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              },
              formatter:'{a}<br/>{b} : {c} %'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '1%',
              containLabel: true
            },
            xAxis: [{
              type: "category",
              data: xDataArr,
              axisLabel: {
                 interval:0,
                 rotate:5
              },
              axisTick: {
                lineStyle: {
                  width: 0
                }
              }
            }],
            yAxis: [{
              type: "value",
              axisLabel:{formatter:'{value}%'}
            }],
            series: [{
              name: "销售车辆毛利率",
              type: "bar",
              barWidth: "50%",
              data: yDataArr
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },
        myEcharts2() { //销售部衍生业务本年度月毛利率对比2
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('main2'));
          var xDataArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] //x轴数据
          var yDataArr = this.yanshengy //y轴数据
          // 指定图表的配置项和数据
          var option = {
            title: {
              top:'10',
              text: '销售部衍生业务本年度月毛利率对比',
              left: 'center'
            },
            toolbox: {          //工具栏
              show: true,
              feature: {
                dataView: {
                  readOnly: true
                }, //readOnly只读模式
                saveAsImage: {}
              }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              },
              formatter:'{a}<br/>{b} : {c} %'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '1%',
              containLabel: true
            },
            xAxis: [{
              type: "category",
              data: xDataArr,
              axisLabel: {
                 interval:0,
                 rotate:5
              },
              axisTick: {
                lineStyle: {
                  width: 0
                }
              }
            }],
            yAxis: [{
              type: "value",
              axisLabel:{formatter:'{value}%'}
            }],
            series: [{
              name: "衍生业务毛利率",
              type: "bar",
              barWidth: "50%",
              data: yDataArr
            }]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },

        myEcharts3() { //销售部车辆业务本月毛利率对比（万元）3
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('main3'));
            var xDataArr = this.chexingx //x轴数据
            var yDataArr = this.chexingy //y轴数据
            // 指定图表的配置项和数据
            var option = {
              title: {
                top:'10',
                text: '销售部车辆业务本月毛利率对比',
                left: 'center'
              },
              toolbox: {          //工具栏
                show: true,
                feature: {
                  dataView: {
                    readOnly: true
                  }, //readOnly只读模式
                  saveAsImage: {}
                }
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                },
                formatter:'{a}<br/>{b} : {c}%'                      //提示框单位
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '1%',
                containLabel: true
              },
              xAxis: [{
                type: "category",
                data: xDataArr,
                axisLabel: {
                   interval:0,
                   rotate:5
                },
                axisTick: {
                  lineStyle: {
                    width: 0
                  }
                }
              }],
              yAxis: [{
                type: "value",
                axisLabel:{formatter:'{value}%'}
              }],
              series: [{
                name: "销售车辆毛利率",
                type: "bar",
                barWidth: "50%",
                data: yDataArr
              }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
          },

        myEcharts4() { //销售部衍生业务本月毛利率对比（万元）3
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('main4'));
            var xDataArr = this.yanshengyuex //x轴数据
            var yDataArr = this.yanshengyuey //y轴数据
            // 指定图表的配置项和数据
            var option = {
              title: {
                top:'10',
                text: '销售部衍生业务本月毛利率对比',
                left: 'center'
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                },
                formatter:'{a}<br/>{b} : {c} %'                      //提示框单位
              },
              toolbox: {          //工具栏
                show: true,
                feature: {
                  dataView: {
                    readOnly: true
                  }, //readOnly只读模式
                  saveAsImage: {}
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '1%',
                containLabel: true
              },
              xAxis: [{
                type: "category",
                data: xDataArr,
                axisLabel: {
                   interval:0,
                   rotate:5
                },
                axisTick: {
                  lineStyle: {
                    width: 0
                  }
                }
              }],
              yAxis: [{
                type: "value",
                axisLabel:{formatter:'{value}%'}
              }],
              series: [{
                name: "衍生业务毛利率",
                type: "bar",
                barWidth: "50%",
                data: yDataArr
              }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
          },

        myEcharts5() { //销售部各岗位本年度毛利率对比5
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('main5'));
          // 指定图表的配置项和数据
          var option = {
            title: {
              top:'10',
              text: '销售部各岗位本年度毛利率对比',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: "shadow"
              },
            },
            legend: {
              data: ['展厅', 'IDCC', '二网', '大客户毛利率'],
              top: '10%'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              show: true,
              feature: {
                dataView: {
                  readOnly: true
                }, //readOnly只读模式
               /* magicType: {
                  type: ['line', 'bar']
                }, */
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap:['50%','20%'],
              data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
              type: 'value',
               axisLabel:{formatter:'{value}%'}
            },
            series: [{
                name: '展厅',
                type: 'line',

                data: this.zhanting
              },
              {
                name: 'IDCC',
                type: 'line',

                data: this.IDCC
              },
              {
                name: '二网',
                type: 'line',

                data: this.erwang
              },
              {
                name: '大客户毛利率',
                type: 'line',

                data: this.dakehu
              },
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },
        myEcharts(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('main'));
          // 指定图表的配置项和数据
          var option = {
        	   title: {
        	          text: '年度毛利率明细',
        	          left: 'left'
        	      },
        	      tooltip: {
        	          trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'      //显示比例
        	      },
       	      legend: {                      //图例组件
        	          orient: 'vertical',
        	          left: 'left',
                    bottom:'20'
        	      },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '1%',
                  containLabel: true
                },
                toolbox: {          //工具栏
                  show: true,
                  feature: {
                    dataView: {
                      readOnly: true
                    }, //readOnly只读模式
                    saveAsImage: {}
                  }
                },
        	      series: [
        	          {
                        center:["60%","50%"],           //图表位置
        	              name: '明细',
        	              type: 'pie',
        	              radius: '60%',      //饼状图大小
        	              data: this.mingxishan,
        	              emphasis: {
        	                  itemStyle: {
        	                      shadowBlur: 10,
        	                      shadowOffsetX: 0,
        	                      shadowColor: 'rgba(0, 0, 0, 0.5)'
        	                  }
        	              }
        	          }
        	      ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          },
        //销售部衍生业务本月毛利率对比
       XiaoShouBuYanShengYeWuBenyueMaoliLvDuiBi() {
          this.$ajax.post('xiaoShouTuBiao/XiaoShouBuYanShengYeWuBenyueMaoliLvDuiBi', {}).then(res => {
            var result = res.data

           for (let i = 0; i < result.data.length; i++) {
             this.yanshengyuex[i] = result.data[i].name;
             this.yanshengyuey[i] = result.data[i].bigNumber;
             var str = this.yanshengyuey[i] * 100
             const realVal = parseFloat(str).toFixed(2);
             this.yanshengyuey[i] = realVal


           }
            this.myEcharts4();
          })
        },
        //销售部车辆业务本月毛利率对比
       MeiGeCheXingMaoLiLvTu(){
              this.$ajax.post('xiaoShouTuBiao/MeiGeCheXingMaoLiLvTu', {}).then(res => {
                var result = res.data
                for (var i = 0; i < result.data.length; i++) {
                  this.chexingx[i] = result.data[i].name;
                  this.chexingy[i] = result.data[i].bigNumber;
                  var str = this.chexingy[i] * 100
                  const realVal = parseFloat(str).toFixed(2);
                  this.chexingy[i] = realVal

                  /* this.chexing[i] = result.data[i]
                  var str = this.chexing[i].bigNumber * 100
                  const realVal = parseFloat(str).toFixed(2);
                  this.chexing[i].bigNumber = realVal */

                }
                this.myEcharts3();
              })
        },
        //车辆年度毛利率TOP3
      CHeLiangNianDuMaoLiLvPaiMing(){
          this.$ajax.post('xiaoShouTuBiao/CHeLiangNianDuMaoLiLvPaiMing', {}).then(res => {
            var result = res.data
            var data = 0;
            for (var i = 0; i < result.data.length; i++) {
              data++;
              var str1 =result.data[i].bigNumber * 100;                     //换为万元
              const realVal = parseFloat(str1).toFixed(2);                  //保留两位小数
              var str = realVal.toString();
              var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
              this.cheliang[i].date = data
              this.cheliang[i].name = result.data[i].name
              this.cheliang[i].shouru = str.replace(reg,"$1,")+'%'

            }
          })
        },
        // 衍生年度毛利率TOP3
       YanShengNianDUMaoliLvPaiMing(){
          this.$ajax.post('xiaoShouTuBiao/YanShengNianDUMaoliLvPaiMing', {}).then(res => {
            var result = res.data
            var data = 0;
            for (var i = 0; i < result.data.length; i++) {
              data++;
              var str1 =result.data[i].bigNumber * 100;                     //换为万元
              const realVal = parseFloat(str1).toFixed(2);                  //保留两位小数
              var str = realVal.toString();

              var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
              this.yansheng[i].date = data
              this.yansheng[i].name = result.data[i].name
              this.yansheng[i].shouru =str.replace(reg,"$1,")+'%'
            }
          })
        },
        //销售部车辆业务本年度月毛利率对比
       XiaoShouBuCheLiangYeWuBenNianDuYueMaoLiLVDuiBi(){
          this.$ajax.post('xiaoShouTuBiao/XiaoShouBuCheLiangYeWuBenNianDuYueMaoLiLVDuiBi', {}).then(res => {
            var result = res.data
            for (var i = 0; i < result.data.length; i++) {
              var str = result.data[i]* 100
              const realVal = parseFloat(str).toFixed(2);
              this.tuyi[i] = realVal
            }
            this.myEcharts1();
          })
        },
        //销售部衍生业务本年度月毛利率对比(12月)
       XiaoShouBuYanShengYeWuBenNianDuYueMaoLiLVDuiBi(){
          this.$ajax.post('xiaoShouTuBiao/XiaoShouBuYanShengYeWuBenNianDuYueMaoLiLVDuiBi', {}).then(res => {
            var result = res.data
            for (var i = 0; i < result.data.length; i++) {
              var str = result.data[i] * 100
              const realVal = parseFloat(str).toFixed(2);
              this.yanshengy[i] = realVal
            }
            this.myEcharts2();
          })
        },

        //销售部各岗位本年度毛利率对比（万元））(12月)
        XiaoShouBuGeGangWeiBenNianDuMaoLiLvDuiBi(){
          this.$ajax.post('xiaoShouTuBiao/XiaoShouBuGeGangWeiBenNianDuMaoLiLvDuiBi', {}).then(res => {
            var result = res.data
            for (var i = 0; i < 12; i++) {
              var str = result.data[0][i] * 100
              const realVal = parseFloat(str).toFixed(2)
              this.zhanting[i] = realVal
            }
            for (var i = 0; i < 12; i++) {
              var str = result.data[1][i] * 100
              const realVal = parseFloat(str).toFixed(2)
              this.IDCC[i] = realVal

            }
            for (var i = 0; i < 12; i++) {
              var str = result.data[2][i] * 100
              const realVal = parseFloat(str).toFixed(2)
              this.erwang[i] = realVal
            }
            for (var i = 0; i < 12; i++) {
              var str = result.data[3][i] * 100
              const realVal = parseFloat(str).toFixed(2)
              this.dakehu[i] = realVal
            }
            this.myEcharts5();
          })
        },

        //年度毛利明细（万元）
        NianDuMaoliLvMingXi(){
          this.$ajax.post('xiaoShouTuBiao/NianDuMaoliLvMingXi', {}).then(res => {
            var result = res.data
            console.log(result.data);
            for (var i = 0; i < result.data.length; i++) {
              var str1 = result.data[i].bigNumber * 100;                     //换为万元
              const realVal = parseFloat(str1).toFixed(2);                  //保留两位小数
              var str = realVal.toString();
              var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
              this.mingxi[i].value= '￥'+str.replace(reg,"$1,")+'%'
              this.mingxi[i].name = result.data[i].name

              this.mingxishan[i].value= realVal
              this.mingxishan[i].name = result.data[i].name
            }
            this.myEcharts();
          })
        },

      },
      mounted() {
        this.myEcharts1();
        this.myEcharts2();
        this.myEcharts3();
        this.myEcharts4();
        this.myEcharts5();
        this.myEcharts();
        this.biaoHeight= 'calc'+'('+this.$refs.myLeftTop.offsetHeight+'px '+'+'+' 3px '+'-'+' 1.7em'+')'    //计算表top3高度       myLeftTop表一div高度，高度相同，两个top表通用
        this.biaoHeightxi= 'calc'+'('+this.$refs.myLeftTop.offsetHeight+'px '+'+'+' -7px '+'-'+' 1.7em'+')'  //计算表明细高度
      },
     created() {
        this.MeiGeCheXingMaoLiLvTu();                                    //销售部车辆业务本月毛利率对比
        this.XiaoShouBuYanShengYeWuBenyueMaoliLvDuiBi();                        //销售部衍生业务本月毛利率对比
        this.CHeLiangNianDuMaoLiLvPaiMing();                             //车辆年度毛利率TOP3
        this.XiaoShouBuCheLiangYeWuBenNianDuYueMaoLiLVDuiBi();           //销售部车辆业务本年度月毛利率对比
        this.XiaoShouBuYanShengYeWuBenNianDuYueMaoLiLVDuiBi();           //销售部衍生业务本年度月毛利率对比(12月)
        this.YanShengNianDUMaoliLvPaiMing();                             //衍生年度毛利率TOP3
        this.XiaoShouBuGeGangWeiBenNianDuMaoLiLvDuiBi();                  //销售部各岗位本年度毛利率对比（万元））(12月)
        this.NianDuMaoliLvMingXi();                                       //年度毛利明细（万元）
      }
    }
</script>

<style scoped>
 .max {
     /* 弹性上下布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .hang1 {
 /* 弹性左右布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
   /* 总布局第一行 */
    width: calc(100% - 3px );
    height: 50%;

  }

  .hang2 {
    margin-top: 18px;
    /* 弹性左右布局 */
       display: -webkit-flex;
       display: flex;
       -webkit-flex-direction: row;
       flex-direction: row;
    /* 总布局第二行 */
    width: calc(100% - 24px );
    height: 50%;

  }

  .hang1-lie1 {
    /* 总布局第一行右列 */
    width: 50%;
    height: 100%;

  }

  .hang1-lie2 {
    /* 总布局第一行左列 */
    width: 50%;
    height: 100%;
  }

  .hang2-lie1 {
    /* 弹性上下布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* 总布局第二行右列 */
    /* 下左 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    border: 3px solid #EBEEF5;
    width: 30%;
    height: calc(102.3% - 12px);
  }
  .hang2-lie1-1{
    /* 下左一 */
   width: 100%;
   height: 50%;
  }
  .hang2-lie1-2{
    /* 下左二 */
   width: 100%;
   height: 50%;
  }

  .hang2-lie2 {
    /* 弹性上下布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* 总布局第二行中列 */
    /* 下中 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: 28%;
    height: calc(102.3% - 12px);
  }
  .hang2-lie2-1{
      /* 下中一 */
      width: 100%;
      height: 50%;
    }
    .hang2-lie2-2{
        /* 下中二 */
        width: 100%;
        height: 50%;
    }

  .hang2-lie3 {
    /* 总布局第二行左列 */
    /* 下右 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: 43%;
    height: calc(102.3% - 12px);
  }

  .hang1-lie1-hang1 {
    /* 上左 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }
  .hang1-lie2-hang3 {
    /* 上右 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }

  .hang1-lie2-hang2 {
    /* 中左 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }

  .hang1-lie1-hang4 {
    /* 中右 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }
  .myH3 {
    padding: 0;
    margin: 0;
  }
</style>
